<template>
	<div class="busineLst">
		<div class="busineLst_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">账号列表<i class="el-icon-close"></i></div>
		</div>
		<div class="busineLst_bottom">
			<div class="new">
				<div class="newBusiness">
					<div class="newBusiness_btn">
					</div>
					<div class="selectBox">
						<el-button
						  type="primary"
						  style="margin:-30px 0 0 0"
						  size="medium"
						  @click="updateNum"
						  >重置抽奖次数</el-button
						>
					</div>
					<div class="newBusiness_serch">
						<div class="select">
							<!-- <div class="item">
								<span>入驻类型</span>
								<el-select v-model="typeValue" clearable @change="selectType" placeholder="请选择">
									<el-option
									v-for="item in typeList"
									:key="item.value"
									:label="item.label"
									:value="item.value">
									</el-option>
								</el-select>
							</div> -->
							<div class="item">
								<span>是否创客</span>
								<el-select v-model="role" clearable @change="selectStatus" placeholder="请选择">
									<el-option
									v-for="item in statusList"
									:key="item.value"
									:label="item.label"
									:value="item.value">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="newBusiness_serch_ipt">
							<el-input v-model="keyword" clearable @input="clearInput" placeholder="用户名 昵称 手机号查询">
							</el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
						<div class="selectBox">
							<el-button
							  type="primary"
							  style="margin-left: 20px"
							  size="medium"
							  @click="dialogExpord=true"
							  >导出</el-button
							>
						</div>
					</div>
				</div>
			</div>
			<div class="busineList_table">
				<div class="busineList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>用户名称</th>
							<th>昵称</th>
							<th>手机号</th>
							<th>产品订单</th>
							<th>产品包订单</th>
							<th>设计师订单</th>
							<th>装修施工单</th>
							<th>关注</th>
							<th>收藏</th>
							<th>足迹</th>
							<th>消息</th>
							<th>注册时间</th>
							<th>状态</th>
							<!-- <th>操作</th> -->
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.username}}</td>
							<td>{{v.nickname}}</td>
							<td>{{v.mobile}}</td>
							<td>{{v.product_order_num}}</td>
							<td>{{v.pack_order_num}}</td>
							<td>{{v.designer_order_num}}</td>
							<td>{{v.builder_order_num}}</td>
							<td>{{v.follow_num}}</td>
							<td>{{v.collect_num}}</td>
							<td>{{v.trace_num}}</td>
							<td>{{v.information_num}}</td>
							<td>{{v.create_time}}</td>
							<!-- <td>{{$moment(v.create_time*1000).format('YYYY-MM-DD')}}</td> -->
							<td>{{v.status == 1 ? '启用' : '禁用'}}</td>
							<!-- <td>
								<button class="shelves" :class="{'delete':v.status==0}"
									@click="goDelete(v.id)">删除</button>
							</td> -->
						</tr>
						<tr v-if="tableList.length == 0">
							<td class="table_title" colspan="8">当前数据空空如也</td>
						</tr>
					</table>
				</div>
				<div class="busineList_bottom_page">
					<div class="busineList_bottom_page_left">
						<!-- <div class="busineList_bottom_page_left_checkAll" @click="handerCheckAll">
						<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
					</div>全选 -->
						<!-- <button class="busineList_bottom_page_left_btn" @click="selectDel">删除</button> -->
					</div>
					<div class="busineList_bottom_page_right">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total" background>
						</el-pagination>
					</div>
				</div>
			</div>

		</div>
         <!-- 导出弹窗 -->
		 <el-dialog title="用户导出" :visible.sync="dialogExpord">
		   <el-form >
		     <el-form-item label="导出位置" label-width="120px">
		       <el-input v-model="start_no" placeholder="从第几条开始导出" ></el-input>
		     </el-form-item>
		    <el-form-item label="数量" label-width="120px">
		      <el-input v-model="end_no" placeholder="导出数量,一次最多2000条"></el-input>
		    </el-form-item>
		   </el-form>
		   <div slot="footer" class="dialog-footer">
		     <el-button @click="dialogExpord = false">取 消</el-button>
		     <el-button type="primary" @click="outFile">确 定</el-button>
		   </div>
		 </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user_id: null, //
				tableList: [],
				input: '',
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],

				// 入驻类型
				typeList: [{
					label: '商家',
					value: 'shop'
				}, {
					label: '设计师',
					value: 'designer_per'
				}, {
					label: '施工队',
					value: 'builder'
				}, {
					label: '装修公司',
					value: 'decoration'
				}],
				typeValue: '',

				// 创客状态
				statusList: [{
					label: '否',
					value: 0
				}, {
					label: '是',
					value: 1
				}],
				statusValue: '',
				keyword: '',
				role:'',//是否创客
				start_no:'',//第几条开始导出
				end_no:'',//导出数量
				dialogExpord:false,
			}
		},
		mounted() {
			let user_id = localStorage.getItem('user_id')
			this.user_id = Number(user_id)
			this.getBusinessList()
		},
		methods: {
			// 获取账号列表
			getBusinessList() {
				let params = {
					user_id: this.user_id,
					page: this.page,
					pagesize: this.pageSize,
					keyword: this.keyword,
					type: this.typeValue,
					status: this.statusValue,
					role:this.role,
				}
				this.$http.post('/api/root/users/lists', params).then(res => {
					if (res.code == 1) {
						console.log(res);
						this.tableList = res.data.users ? res.data.users : [];
						this.total = res.data.count
					}
				})
			},

			// 编辑
			toEdit(id) {
				console.log(id);
				this.$router.push({
					name: 'editBusiness',
					query: {
						id
					}
				})
			},

			// 清除搜索
			clearInput() {
				if (this.input == '') {
					this.getBusinessList()
				}
			},

			//禁用与启用
			toStop(id, status) {
				let sta = status == 1 ? 0 : 1;
				this.$http.post('/api/root/Approval/accountStatus', {
					user_id: this.user_id,
					account_id: id,
					status: sta
				}).then(res => {
					if (res.code == 1) {
						this.getBusinessList();
						this.$message({
							type: 'success',
							message: '操作成功'
						})
					} else {
						this.$message({
							type: 'warning',
							message: res.msg
						})
					}
				})
			},
			//删除会员
			goDelete(id) {
				this.$confirm('是否确定删除', '提示').then(() => {
					this.$http.post('/api/root/users/del', {
						id: id
					}).then(res => {
						if (res.code == 1) {
							this.getBusinessList();
							this.$message({
								type: 'success',
								message: '操作成功'
							})
						}else{
							this.$message(res.msg);
						}
					}).catch(err => {

					}).finally(r => {
						
					})
				}).catch(() => {

				});
			},

			// 选择入驻类型
			selectType() {
				this.page = 1
				this.getBusinessList()
			},

			// 选择状态
			selectStatus() {
				this.page = 1
				this.getBusinessList()
			},


			// 新增账号店铺
			handerNewShop() {
				this.$message({
					type: 'warning',
					message: '暂未开放'
				})
			},

			// 搜索
			handerSeach() {
				this.getBusinessList()
			},

			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index > -1) {
						arr.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
				} else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for (let i = 0; i < res.length; i++) {
					for (let j = i + 1; j < res.length; j++) {
						if (res[i] == res[j]) {
							res.splice(j, 1);
							j--;
						}
					}
				};
				this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})

				console.log(this.shelvesAlls);
			},


			//点击详情
			toDetail(id) {},

			//点击删除
			del(id) {},

			// 全选里的删除
			// selectDel(){},

			//分页
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(val);
				this.getBusinessList()
			},
			handleCurrentChange(val) {
				this.page = val;
				console.log(val);
				this.getBusinessList()
			},
			// 导出按钮
			outFile() {
				if(!this.start_no){
					this.$message({
						type: 'warning',
						message: '请填写导出用户开始位置'
					})
					return false;
				}
				if(!this.end_no){
					this.$message({
						type: 'warning',
						message: '请填写导出用户数量'
					})
					return false;
				}
				this.dialogExpord=false;
			  var a = document.createElement("a");
			  a.setAttribute(
			    "href",
			    `/api/root/users/export?keyword=${this.keyword}&start_no=${this.start_no}&end_no=${this.end_no}&role=${this.role}`
			  );
			  a.setAttribute("target", "_blank");
			  a.setAttribute("id", "startTelMedicine");
			  // 防止反复添加
			  if (document.getElementById("startTelMedicine")) {
			    document.body.removeChild(document.getElementById("startTelMedicine"));
			  }
			  document.body.appendChild(a);
			  a.click();
			},
			//重置抽奖次数
			updateNum(){
				this.$confirm('是否重置用户抽奖次数', '提示').then(() => {
					this.$http.post('/api/root/users/updateNum', {
						
					}).then(res => {
						if (res.code == 1) {
							this.$message({
								type: 'success',
								message: '操作成功'
							})
						}else{
							this.$message(res.msg);
						}
					})
				}).catch(() => {
				
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	@import "index.less";
</style>
